Cloudflare Workers

$ npx create-cloudflare my-app --framework hono \ --deploy false

$ cd my-app && npm run dev

.dev.vars

本地使用的環境變數

$ echo "ENV = \"local\"" >> .dev.vars

wrangler.toml

deploy後使用的環境變數

code:wrangler.toml

name = "my-app"

compatibility_date = "2023-01-01"

vars

ENV = "development"

index.ts

code:index.ts

import { Hono } from "hono";

const app = new Hono<{

Bindings: {

ENV: string;

};

}>();

app.get("/", (c) => c.text(c.env.ENV));

export default app;

$ curl http://localhost

使用wrangler指令加入middleware

需於wrangler.toml加上設定

和Cloudflare Workers可使用的middleware大致相同

Cloudflare Workers KV

Layout

code:src/renderer.tsx

import { jsxRenderer } from 'hono/jsx-renderer'

export const renderer = jsxRenderer(({ children }) => {

return (

<html>

<head>

</head>

<body>

<h1><a href="/">Title</a></h1>

</header>

<div>{children}</div>

</body>

</html>

)

})

code:src/index.tsx

app.get('/', (c) => {

return c.render(

<div>

<h2>Subtitle</h2>

<button type="submit">Submit</button>

</form>

</div>

)

})

LogPush

Create Cloudflare CLI